<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色权限编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--菜单穿梭框-->
<div class="layui-margin-3 layui-anim layui-anim-upbit" style="text-align: center;">
    <div id="ID-transfer-demo-inst"></div>
    <hr class="layui-border-blue">
    <button type="button" class="layui-btn layui-btn-normal" lay-on="doConfirm">确 认</button>
</div>

<!--当前角色ID-->
<input type="text" id="roleId" th:value="${identityId}" hidden="hidden">

<script src="/layui/layui.js"></script>
<script th:inline="javascript">
    // 注入列表并转为 JSON
    const menus = /*[[${menus}]]*/ [];
    const haveId = /*[[${haveId}]]*/ [];
</script>
<script>
    layui.use(['transfer', 'util', 'layer', 'jquery'], function () {
        let transfer = layui.transfer;
        let util = layui.util;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 渲染穿梭框组件
        transfer.render({
            elem: '#ID-transfer-demo-inst',
            title: ['未拥有的菜单权限', '已拥有的菜单权限'],
            data: menus,    // 全部数据
            value: haveId,  // 右侧数据
            id: 'demo-inst',    // 定义唯一索引
            showSearch: false,  // 是否开启搜索
            text: {
                none: '无菜单权限',  // 没有数据时的文案
                searchNone: '无匹配数据' // 搜索无匹配数据时的文案
            },
            parseData: function (res) { // 数据格式解析的回调函数
                return {
                    "value": res.id,    // 数据值
                    "title": res.name,  // 数据名
                    "disabled": res.status === 2,   // 是否禁用
                    "checked": false    // 是否选中
                }
            }
        });

        // 批量事件
        util.on('lay-on', {
            doConfirm: function () {
                let getData = transfer.getData('demo-inst'); // 获取右侧数据

                // 提取所有的 value
                const values = getData.map(item => item.value);
                console.log(values)

                // 进行权限更新
                $.ajax({
                    url: '/doSetRoleMenu/' + $('#roleId').val(),
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(values),
                    success: function (res) {
                        layer.msg(res === 1 ? '更新成功' : '更新失败');
                        setTimeout(function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));    // 关闭弹出层
                        }, 2000);
                    },
                    error: function (error) {
                        console.error('发送数据时出错:', error);
                        layer.msg('Ajax请求异常！', {icon: 0});
                    }
                });
            }
        });
    });
</script>
</body>
</html>